<template>
  <div>
    <div v-if="!_value || _value.length <= 0" class="tips">暂无下单说明，可添加下单说明！</div>
    <div v-for="(item, index) in _value" v-else :key="index" style="margin-bottom: 15px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item
            :prop="'orderReadme.' + index + '.key'"
            :rules="[
              {
                required: true,
                message: '请输入标题',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              v-model="item.key"
              placeholder="请输入标题"
              clearable
              maxlength="6"

              @change="changeTitle"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <div style="display: flex;flex-direction: row; justify-content: space-between">
            <el-form-item
              :prop="'orderReadme.' + index + '.value'"
              style="width: 100%"
              :rules="[
                {
                  required: true,
                  message: '请输入描述',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="item.value"
                placeholder="请输入描述"
                clearable
                maxlength="50"
                show-word-limit

                @change="changeDesc"
              />
            </el-form-item>
            <div style="flex-shrink: 0; margin-left: 20px">
              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="delRow(index)" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="text-align: right">
      <el-button type="primary" size="mini" @click="addRow">添加下单说明</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderReadme',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    var validateReadme = (rule, value, callback) => {
      if (value && value.length > 0) {
        for (let i = 0; i < value.length; i++) {
          if (!value[i].title || value[i].title.length <= 0) {
            return callback(new Error('请输入标题'))
          }
        }
      }
      callback()
    }
    return {
      rules: {
        orderReadme: [
          { validator: validateReadme, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {// 深度监听，可监听到对象、数组的变化
      handler(newVal) {
        this._value = newVal
        this.$emit('change', this._value)
        this.$forceUpdate()
      },
      deep: true // true 深度监听
    }
  },
  methods: {
    addRow() {
      this._value.push({
        key: null,
        value: null
      })
      this.$emit('change', this._value)
      this.$forceUpdate()
    },
    delRow(index) {
      this._value.splice(index, 1)
      this.$emit('change', this._value)
      this.$forceUpdate()
    },
    changeTitle() {
      this.$emit('change', this._value)
      this.$forceUpdate()
    },
    changeDesc() {
      this.$emit('change', this._value)
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

  .tips {
    text-align: center;
    padding: 15px;
    color: #bbbbbb;
    font-size: 14px;
  }
</style>
